<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7EB9',
                        secondary: '#A78BFA',
                        accent: '#FBBF24',
                        success: '#34D399',
                        warning: '#FBBF24',
                        danger: '#F87171',
                        info: '#60A5FA',
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部导航栏 -->
        <div class="bg-gradient-to-r from-pink-400 to-purple-500 text-white">
            <div class="flex items-center justify-between px-4 py-3">
                <button onclick="window.parent.navigateTo('home.html')" class="p-1">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-lg font-bold">设置</h1>
                <div class="w-6"></div> <!-- 占位，保持标题居中 -->
            </div>
        </div>
        
        <!-- 设置内容区域 -->
        <div class="flex-1 overflow-y-auto">
            <!-- 数据管理部分 -->
            <div class="bg-white mt-3 rounded-2xl shadow-custom overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-100">
                    <h2 class="text-base font-bold text-gray-700">数据管理</h2>
                </div>
                <div class="py-2">
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="fa fa-download text-green-500"></i>
                            </div>
                            <span class="text-gray-800">导出数据</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fa fa-upload text-blue-500"></i>
                            </div>
                            <span class="text-gray-800">导入数据</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fa fa-database text-purple-500"></i>
                            </div>
                            <span class="text-gray-800">本地备份</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                </div>
            </div>
            
            <!-- 通知设置部分 -->
            <div class="bg-white mt-3 rounded-2xl shadow-custom overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-100">
                    <h2 class="text-base font-bold text-gray-700">通知设置</h2>
                </div>
                <div class="py-2">
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                                <i class="fa fa-bell text-amber-500"></i>
                            </div>
                            <span class="text-gray-800">借用归还提醒</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                <i class="fa fa-wrench text-red-500"></i>
                            </div>
                            <span class="text-gray-800">保养提醒</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                                <i class="fa fa-shopping-cart text-indigo-500"></i>
                            </div>
                            <span class="text-gray-800">耗材购买提醒</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- 应用设置部分 -->
            <div class="bg-white mt-3 rounded-2xl shadow-custom overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-100">
                    <h2 class="text-base font-bold text-gray-700">应用设置</h2>
                </div>
                <div class="py-2">
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fa fa-camera text-blue-500"></i>
                            </div>
                            <span class="text-gray-800">启用扫码识别</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="fa fa-picture-o text-green-500"></i>
                            </div>
                            <span class="text-gray-800">允许照片上传</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fa fa-language text-purple-500"></i>
                            </div>
                            <span class="text-gray-800">语言设置</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-gray-500 mr-2">简体中文</span>
                            <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 关于部分 -->
            <div class="bg-white mt-3 rounded-2xl shadow-custom overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-100">
                    <h2 class="text-base font-bold text-gray-700">关于</h2>
                </div>
                <div class="py-2">
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fa fa-info-circle text-blue-500"></i>
                            </div>
                            <span class="text-gray-800">版本信息</span>
                        </div>
                        <span class="text-gray-500">1.0.0</span>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="fa fa-shield text-green-500"></i>
                            </div>
                            <span class="text-gray-800">隐私政策</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3.5 hover:bg-pink-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                                <i class="fa fa-file-text-o text-amber-500"></i>
                            </div>
                            <span class="text-gray-800">用户协议</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                </div>
            </div>
            
            <!-- 反馈建议按钮 -->
            <div class="px-4 mt-8 mb-12">
                <button class="w-full bg-gradient-to-r from-pink-400 to-purple-500 text-white rounded-full py-3.5 text-center font-medium hover:opacity-90 transition-colors shadow-md">
                    <i class="fa fa-comment-o mr-2"></i>反馈与建议
                </button>
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 为所有设置项添加点击事件
            const settingItems = document.querySelectorAll('.hover\:bg-gray-50');
            settingItems.forEach(item => {
                if (!item.querySelector('input[type="checkbox"]')) {
                    item.addEventListener('click', function() {
                        // 模拟点击效果
                        const icon = this.querySelector('i:not(.fa-chevron-right):not(.fa-arrow-left):not(.fa-bell):not(.fa-wrench):not(.fa-shopping-cart):not(.fa-camera):not(.fa-picture-o):not(.fa-language):not(.fa-info-circle):not(.fa-shield):not(.fa-file-text-o):not(.fa-comment-o)');
                        if (icon) {
                            // 为图标添加动画效果
                            icon.classList.add('animate-bounce');
                            setTimeout(() => {
                                icon.classList.remove('animate-bounce');
                            }, 300);
                        }
                        
                        // 根据不同的设置项执行不同操作
                        const textContent = this.querySelector('span').textContent;
                        switch(textContent) {
                            case '导出数据':
                                alert('导出数据功能将以CSV格式保存您的工具信息');
                                break;
                            case '导入数据':
                                alert('导入数据功能将从CSV文件恢复您的工具信息');
                                break;
                            case '本地备份':
                                alert('本地备份功能将创建您的工具数据库副本');
                                break;
                            case '语言设置':
                                alert('当前支持的语言：简体中文、English');
                                break;
                            case '隐私政策':
                                alert('隐私政策：本应用仅在本地存储您的数据，不会上传至任何服务器');
                                break;
                            case '用户协议':
                                alert('用户协议：请遵守使用条款，合理使用本应用');
                                break;
                        }
                    });
                }
            });
            
            // 为反馈与建议按钮添加点击事件
            document.querySelector('button:last-child').addEventListener('click', function() {
                alert('感谢您的反馈！您的建议将帮助我们改进应用体验');
            });
        });
    </script>
</body>
</html>